<template>
  <ContainerGroup>
    <Container>
      <div class="ck-filter-form" :style="{ height: containerHeight }">
        <div ref="input-container" class="form-item-container">
          <div class="form-item">
            <span class="form-item-label">院区：</span>
            <el-select
              v-model="ruleForm.region"
              placeholder="请选择院区"
              size="mini"
              style="width: 180px"
              filterable
              @change="changeHospital"
            >
              <el-option
                v-for="item in ruleFormSelect.regionoptions"
                :key="item.value"
                :label="item.label"
                :value="item.value"
              />
            </el-select>
          </div>
          <div class="form-item">
            <span class="form-item-label">科室：</span>
            <el-select
              v-model="ruleForm.deptCode"
              placeholder="请选择科室"
              size="mini"
              style="width: 180px"
              filterable
              clearable
              @change="deptChange"
            >
              <el-option
                v-for="item in ruleFormSelect.deptCodeoptions"
                :key="item.value"
                :label="item.label"
                :value="item.value"
              />
            </el-select>
          </div>
          <div class="form-item">
            <span class="form-item-label">病区：</span>
            <el-select
              v-model="ruleForm.nurseCellCode"
              placeholder="请选择病区"
              size="mini"
              style="width: 180px"
              filterable
              clearable
              @change="nurseCellChange"
            >
              <el-option
                v-for="item in ruleFormSelect.nurseCellCodeoptions"
                :key="item.value"
                :label="item.label"
                :value="item.value"
              />
            </el-select>
          </div>
          <div class="form-item">
            <span class="form-item-label">时间：</span>
            <el-date-picker
              v-model="ruleForm.timeDate"
              type="daterange"
              range-separator="至"
              start-placeholder="开始日期"
              end-placeholder="结束日期"
              value-format="yyyy-MM-dd HH:mm:ss"
              :default-time="['00:00:00', '23:59:59']"
              size="mini"
            />
          </div>
        </div>
        <div class="right-btn-container">
          <div
            v-for="(item, index) in buttonList"
            :key="index + '_'"
            class="form-item-btn"
          >
            <Button
              :type="item.type"
              :icon="item.icon"
              :loading="item.loading"
              @click="item.handlerClick"
            >{{ item.label }}</Button>
          </div>
          <span
            v-show="showCloseAndOpen"
            class="more-text"
            @click="openAndCloseFilterForm"
          >{{ openOrCloseText }}</span>
        </div>
      </div>
    </Container>
    <Container height="fill" :scroll-y="true" display="flexY">
      <OperationContainer align="right" style="margin-bottom: 10px">
        <Button
          icon="export"
          @click="_DownLoad"
        >导出</Button>
      </OperationContainer>
      <Table
        :columns="tableColumns"
        :data="tableData"
        :loading="tableLoading"
        :pagination="{
          total: total,
          current: pageInfor.pageNum,
          pageSize: pageInfor.pageSize,
        }"
        @paginationChange="pageChange"
      />
    </Container>
  </ContainerGroup>
</template>
<script>
import {
   getDataSource,
  //getEmptyBedReportNew,
  downDataSourceFormExcel,
  getDeptListByYard,
  getPatientAreaDTO,
  getWardList,
  getHisCwglDeptByAreaCode
} from '../../utils/apis/registrationApi'
export default {
  data() {
    return {
      buttonList: [
        {
          label: '查询',
          type: 'primary',
          icon: 'search',
          handlerClick: this.handerSearch,
          loading: false
        },
        {
          label: '重置',
          type: 'info',
          icon: 'reset',
          handlerClick: this.handlerReset
        }
      ],
      containerHeight: '35px',
      showCloseAndOpen: false,
      openOrCloseText: '展开',
      tableLoading: false,
      tableData: [],
      pageInfor: {
        pageNum: 1,
        pageSize: 20
      },
      tableColumns: [
        {
          title: '时间',
          dataIndex: 'riqi',
          width: 300
        },
        {
          title: '科室名称',
          dataIndex: 'deptName'
        },
        {
          title: '病区名称',
          dataIndex: 'nurseCellName'
        },
        {
          title: '集管床位空床数',
          dataIndex: 'jgFreeCnt'
        },
        {
          title: '非集管床位空床数',
          dataIndex: 'fjgfreeCnt'
        },
        {
          title: '编制内空床',
          dataIndex: 'freeCnt',
          width: 100
        },
        {
          title: '编制内床位',
          dataIndex: 'bedStand',
          width: 100
        },
        {
          title: '院区',
          dataIndex: 'yard',
          width: 100
        }
      ],
      total: 0,
      queryList: {},
      ruleForm: {
        deptCode: '',
        nurseCellCode: '',
        timeDate: [],
        region: '1'
      },
      ruleFormSelect: {
        deptCodeoptions: [],
        nurseCellCodeoptions: [],
        regionoptions: [
          {
            value: '1',
            label: '三香院区'
          },
          {
            value: '2',
            label: '浒关院区'
          }
        ]
      }
    }
  },
  mounted() {
    this.getTime()
    this.getDept()
    this.getFdata()
    this.getWard()
    this.initShowCloseOrOpen()
    window.addEventListener('resize', this.initShowCloseOrOpen)
  },
  beforeDestroy() {
    window.removeEventListener('resize', this.initShowCloseOrOpen)
  },
  methods: {
    initShowCloseOrOpen() {
      setTimeout(() => {
        this.showCloseAndOpen = this.$refs['input-container'].scrollHeight > 35
      }, 50)
    },
    openAndCloseFilterForm() {
      this.containerHeight = this.openOrCloseText === '展开' ? 'auto' : '35px'
      this.openOrCloseText = this.openOrCloseText === '展开' ? '收起' : '展开'
    },
    // 院区变化- 请求
    changeHospital() {
      this.getDept()
      this.getWard()
      this.getFdata()
    },
    getTime() {
      const nowdays = new Date()
      let year = nowdays.getFullYear()
      let month = nowdays.getMonth()
      if (month === 0) {
        month = 12
        year = year - 1
      }
      if (month < 10) {
        month = '0' + month
      }
      const myDate = new Date(year, month, 0)
      const startDate = year + '-' + month + '-01 00:00:00' // 上个月第一天
      const endDate = year + '-' + month + '-' + myDate.getDate() + ' 23:59:00'// 上个月最后一天
      this.ruleForm.timeDate = [startDate, endDate]
    },
    handlerReset() {
      this.ruleForm.region = '1'
      this.ruleForm.deptCode = ''
      this.ruleForm.nurseCellCode = ''
      this.getTime()
      this.ruleFormSelect.nurseCellCodeoptions = []
    },
    // 获取数据
    getFdata() {
      const parms = {
        deptCode: this.ruleForm.deptCode,
        endDate: this.ruleForm.timeDate === '' || this.ruleForm.timeDate === null ? '' : this.ruleForm.timeDate[1],
        nurseCellCode: this.ruleForm.nurseCellCode,
        pageNum: this.pageInfor.pageNum,
        pageSize: this.pageInfor.pageSize,
        startDate: this.ruleForm.timeDate === '' || this.ruleForm.timeDate === null ? '' : this.ruleForm.timeDate[0],
        yard: this.ruleForm.region
      }
      getDataSource(parms).then((res) => {
        if (res.data.code === 200) {
          this.tableData = res.data.data.list
          this.total = res.data.data.total
        }
      })
      // getEmptyBedReportNew(parms).then((res) => {
      //   if (res.data.code === 200) {
      //     this.tableData = res.data.data.list
      //     this.total = res.data.data.total
      //   }
      // })
    },
    // 获取病区下拉数据
    getWard() {
      this.ruleForm.nurseCellCode = ''
      this.ruleFormSelect.nurseCellCodeoptions = []
      const parms = {
        yard: this.ruleForm.region
      }
      getWardList(parms).then((res) => {
        if (res.data.code === 200) {
          let dats = {
            label: '',
            value: ''
          }
          res.data.data.forEach((element) => {
            dats = {
              label: element.deptName,
              value: element.deptCode
            }
            this.ruleFormSelect.nurseCellCodeoptions.push(dats)
          })
        }
      })
    },
    // 获取科室下拉数据
    getDept() {
      this.ruleForm.deptCode = ''
      this.ruleFormSelect.deptCodeoptions = []
      const parms = {
        yard: this.ruleForm.region
      }
      getDeptListByYard(parms).then((res) => {
        if (res.data.code === 200) {
          let dats = {
            label: '',
            value: ''
          }
          res.data.data.forEach((element) => {
            dats = {
              label: element.deptName,
              value: element.deptCode
            }
            this.ruleFormSelect.deptCodeoptions.push(dats)
          })
        }
      })
    },
    // 根据科室查病区
    deptChange() {
      // this.ruleForm.nurseCellCode = ''
      this.ruleFormSelect.nurseCellCodeoptions = []
      getPatientAreaDTO({ deptCode: this.ruleForm.deptCode, yard: this.ruleForm.region }).then(
        (res) => {
          if (res.data.code === 200) {
            let dats = {
              label: '',
              value: ''
            }
            res.data.data.forEach((element) => {
              dats = {
                label: element.areaName,
                value: element.areaId
              }
              this.ruleFormSelect.nurseCellCodeoptions.push(dats)
            })
          }
        }
      )
      if (this.ruleForm.deptCode === '') {
        this.getDept()
      }
    },
    // 根据病区查科室
    nurseCellChange() {
      this.ruleFormSelect.deptCodeoptions = []
      if (this.ruleForm.deptCode === '') {
        if (this.ruleForm.nurseCellCode === '') {
          this.getDept()
        } else {
          getHisCwglDeptByAreaCode({ areaCode: this.ruleForm.nurseCellCode, yard: this.ruleForm.region }).then(
            (res) => {
              if (res.data.code === 200) {
                let dats = {
                  label: '',
                  value: ''
                }
                res.data.data.forEach((element) => {
                  dats = {
                    label: element.deptName,
                    value: element.deptCode
                  }
                  this.ruleFormSelect.deptCodeoptions.push(dats)
                })
              }
            }
          )
        }
      }
    },
    // 获取下拉框数据
    pageChange(page) {
      this.pageInfor.pageNum = page.current
      this.pageInfor.pageSize = page.pageSize
      this.getFdata()
    },
    _DownLoad() {
      const parms = {
        deptCode: this.ruleForm.deptCode,
        endDate: this.ruleForm.timeDate === '' || this.ruleForm.timeDate === null ? '' : this.ruleForm.timeDate[1],
        nurseCellCode: this.ruleForm.nurseCellCode,
        pageNum: this.pageInfor.pageNum,
        pageSize: this.pageInfor.pageSize,
        startDate: this.ruleForm.timeDate === '' || this.ruleForm.timeDate === null ? '' : this.ruleForm.timeDate[0],
        yard: this.ruleForm.region
      }
      downDataSourceFormExcel(parms).then((res) => {
        // if (res.data.code === 200) {
        const blob = new Blob([res.data])
        const fileName = '数据报表空床查询报表' + '.xlsx'
        const URL = window.URL || window.webkitURL || window.moxURL
        if ('download' in document.createElement('a')) {
          // 非IE下载
          const elink = document.createElement('a')
          elink.download = fileName // 命名下载名称
          elink.style.display = 'none'
          elink.href = URL.createObjectURL(blob) // 表示一个指定的file对象或Blob对象
          document.body.appendChild(elink)
          elink.click() // 点击触发下载
          URL.revokeObjectURL(elink.href) // 释放URL 对象
          document.body.removeChild(elink)
        } else {
          // IE10+下载
          navigator.msSaveBlob(blob, fileName)
        }
        // }
      })
    },
    handerSearch() {
      this.pageInfor.pageNum = 1
      this.getFdata()
    }
  }
}
</script>
<style lang="less" scoped>
.ck-filter-form {
  display: flex;
  align-items: top;
  overflow: hidden;
  .form-item-container {
    display: flex;
    flex-wrap: wrap;
    justify-content: flex-start;
    .form-item {
      display: flex;
      align-items: center;
      margin: 3px;
      margin-right: 15px;
      .form-item-label {
        color: #909399;
        text-align: right;
        font-size: 16px;
        white-space: nowrap;
      }
    }
  }
  .right-btn-container {
    text-align: center;
    display: flex;
    padding-top: 5px;
    .form-item-btn {
      margin: 0px 3px;
    }
    .more-text {
      display: block;
      width: 50px;
      margin-top: 6px;
      color:#2165f9;
      cursor: pointer;
      user-select: none;
    }
  }
}
.form-item {
  min-width: 280px;
  height: 28px;
}
.form{
  display: flex;
  align-items: center;
  p{
    margin-right: 40px;
    color: #909399;
  }
}
</style>
